<template>
  <div class="center">
    <div class="header">
      <div class="left">
        <img class="leftImg" src="~@/assets/images/sculpture.png" alt="" />
        <div class="info">
          <div class="nickname">{{ $store.state.user.userInfo.name }}</div>
          <div class="memberTitle0">普通用户</div>
          <!-- <text class="nickname">用户96353746</text>
          <text class="memberTitle0">普通用户</text> -->
        </div>
      </div>
      <div class="right">
        <div class="rightImg"></div>
        <div class="m-supermcEntrance">
          <div class="u-icon"></div>
          <div class="a-icon">
            <div class="line1">Pro会员</div>
            <div class="line2">立即试用</div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-myAsset">
      <div class="tt">我的资产</div>
      <div class="assetList">
        <div class="assetItem">
          <div class="assetCount">
            <span class="unit">￥</span>
            <span class="redDot">0</span>
          </div>
          <div class="assetName">余额</div>
        </div>
        <div class="assetItem">
          <div class="assetCount">
            <!-- <span class="unit">￥</span> -->
            <span class="redDot">0</span>
          </div>
          <div class="assetName">红包</div>
        </div>
        <div class="assetItem">
          <div class="assetCount">
            <!-- <span class="unit">￥</span> -->
            <span class="redDot">0</span>
          </div>
          <div class="assetName">优惠卷</div>
        </div>
        <div class="assetItem">
          <div class="assetCount">
            <span class="unit">￥</span>
            <span class="redDot">0</span>
          </div>
          <div class="assetName">津贴</div>
        </div>
        <div class="assetItem">
          <div class="assetCount">
            <!-- <span class="unit">￥</span> -->
            <span class="redDot">0</span>
          </div>
          <div class="assetName">礼品卡</div>
        </div>
      </div>
    </div>

    <van-grid square :column-num="3">
      <van-grid-item icon="description" text="我的订单" />
      <van-grid-item icon="user-circle-o" text="账号管理" />
      <van-grid-item icon="phone-o" text="我的手机号" />
      <van-grid-item icon="calendar-o" text="周六一起拼" />
      <van-grid-item icon="logistics" text="售后服务" />
      <van-grid-item icon="exchange" text="邀请返利" />
      <van-grid-item icon="goods-collect-o" text="优先购" />
      <van-grid-item icon="refund-o" text="积分中心" />
      <van-grid-item icon="gem-o" text="会员俱乐部" />
      <van-grid-item icon="logistics" text="地址管理" />
      <van-grid-item icon="friends-o" text="支付安全" />
      <van-grid-item icon="friends-o" text="帮助与客服" />
      <van-grid-item icon="envelop-o" text="意见反馈" />
      <van-grid-item icon="gold-coin-o" text="我的竞拍" />
    </van-grid>
    <div class="useless"></div>
    <van-button
      @click="logout"
      type="primary"
      size="large"
      color="#333"
      plain
      style="border: 0"
      >退出登录</van-button
    >
    <div class="useless_1"></div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Center",
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  //退出登录
  methods: {
    async logout() {
      try {
        await this.$store.dispatch("userLogout");
        this.$router.push("/");
      } catch (error) {
        alert("退出登录失败" + error.message);
      }
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    test() {
      console.log("111", this.userInfo);
    },
  },
};
</script>

<style lang="less" scoped>
.center {
  width: 100%;
  height: 1070px;
  .header {
    width: 100%;
    height: 135px;
    background-image: url(~@/assets/images/setting.png);
    background-size: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    .left {
      // background-color: red;
      width: 255px;
      height: 100%;
      margin: 0 32px;
      display: flex;
      align-items: center;
      .leftImg {
        width: 71px;
        height: 71px;
        border-radius: 50%;
      }
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        // height: 135px;
        justify-content: space-around;
        color: #fff;
        padding: 10px;
        // background-color: yellow;
        .nickname {
          font-size: 18px;
          margin-bottom: 5px;
        }
        .memberTitle0 {
          font-size: 14px;
        }
      }
    }

    .right {
      width: 105px;
      height: 94px;
      // background-color: yellow;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      .rightImg {
        width: 32px;
        height: 32px;
        // background-color: red;
        background-image: url(~@/assets/images/sprite_2.png);
        // background-repeat: no-repeat;
        background-size: 86px 210px;
        background-position: -38px -116px;
        background-size: 39px;
        margin-right: 20px;
      }
      .m-supermcEntrance {
        width: 101.5px;
        height: 42px;
        border-top-left-radius: 32px;
        border-bottom-left-radius: 32px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(180deg, #574e44 0, #0e0e0e 100%);
        .u-icon {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background-image: url(~@/assets/images/sprite_2.png);
          background-position: -42px -80px;
          background-size: 38px;
          margin-left: 5px;
          background-color: #3f3c38ed;
        }
        .a-icon {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          font-size: 13px;
          color: #f9e0c0;
        }
      }
    }
  }
  .m-myAsset {
    width: 100%;
    color: #333;
    border-bottom: 0.2rem solid #f4f4f4;
    .tt {
      width: 100%;
      height: 53px;
      font-size: 14px;
      color: #333;
      line-height: 53px;
      margin-left: 15px;
      border-bottom: 1px solid #d9d9d9;
    }
    .assetList {
      width: 100%;
      display: flex;
      .assetItem {
        // width: 20%;
        flex: 1;
        height: 96px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .assetCount {
          display: flex;
          width: 100%;
          height: 24px;
          justify-content: center;
          align-items: center;
          .unit {
            font-size: 12px;
          }
          .redDot {
            font-size: 16px;
            font-weight: 700;
          }
        }
        .assetName {
          font-size: 12px;
          // width: 100%;
          height: 18px;
        }
      }
    }
  }
  .useless {
    width: 100%;
    height: 30px;
    background-color: #d9d9d9;
  }
  .useless_1 {
    width: 100%;
    height: 20px;
    background-color: #d9d9d9;
  }
}
</style>
